<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 实例--鼠标跟随大图移动 </title>
    <style>
        *{
            box-sizing:border-box;
        }
        body,ul,li{
            margin:0; padding:0;
        }
        body{
            overflow:hidden;
        }
        ul{
            list-style:none;
            width:800px;
            margin: 50px auto;
        }
        img{
            width:100%;
        }
        ul li{
            width:170px;
            border:solid 1px #ccc;
            display:inline-block;
            margin:0 12px;
            cursor:pointer;
        }
        ul li.active{
            border:solid 1px red;
        }
        #big{
            width:400px;
            height:400px;
            border:solid 1px #ccc;
            position:absolute;
            top:0;
            left:0;
            display:none;
        }
    </style>
</head>
<body>
<div id="box">
    <ul>
        <li><img src="img/shirt_1.jpg" /></li>
        <li><img src="img/shirt_2.jpg" /></li>
        <li><img src="img/shirt_3.jpg" /></li>
        <li><img src="img/shirt_4.jpg" /></li>
    </ul>
</div>
<div id="big">
    <img src="img/shirt_1_big.jpg" alt=""/>
</div>
</body>
<script>
// 获取所有的标签元素
    var lis = document.querySelectorAll('li')
    var div = document.querySelector('#big')
    var img = document.querySelector('#big img')

    for( var i = 0; i < lis.length; i++ ){
        lis[i].index = i
//    显示大图容器，图片一一对应
        lis[i].onmouseover = function(){
            div.style.display = 'block'
            this.className = 'active'
            img.src = 'img/shirt_' + (this.index + 1)
                + '_big.jpg'
        }
//    大图随鼠标移动，默认在鼠标的右侧
        lis[i].onmousemove = function(ev){
//        先设置初始位置
            console.log(ev)
            var w = document.documentElement.clientWidth
            var divX = ev.clientX
            var divY = ev.clientY

            div.style.top = divY + 10 + 'px'
//            div.style.left = divX + 10 + 'px'
    //    判断如果剩余空间小于容器大小，图片在左侧显示
            if( w - divX < div.offsetWidth ){
                div.style.left = ( divX - div.offsetWidth ) - 10 + 'px'
            } else {
                div.style.left = divX + 10 + 'px'
            }
        }
//     鼠标离开图片，容器消失
        lis[i].onmouseout = function(){
            this.className = ''
            div.style.display = 'none'
        }
    }

</script>
</html>